<template>
    <div class="body">
        <div class="body-top">
            <el-form class="form-box" ref="formRef" :model="form" label-width="auto" size="large" @submit.native.prevent>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="条形码：" prop="salaAmt">
                            <el-input v-model="form.code" placeholder="点击扫描条形码" @keyup.enter.native="searchTicket" />
                            <img class="qrcode-img" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/vip/qrcode.png" alt="">
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="display: none;">
                        <el-form-item label="条形码：" prop="salaAmt"></el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="pageClose">
                <div @click="router.back()" style="cursor: pointer;">关闭</div>
            </div>
        </div>
        <div class="boxContent">
            <div class="boxLeft">
                <div class="orderBox">
                    <div class="orderDetails">
                        <div style="display: flex;align-items: center;justify-content: space-between;padding-right: 20px;">
                            <div class="tableTop">桌台：{{ ls.get('TABLE_INFO').roomName }}</div>
                            <!-- <div class="jt-select" v-if="showYxOrder"> -->
                            <div class="jt-select">
                            <div class="jt-xdr">下单人：</div>
                                    <el-tree-select
                                        v-model="selectedValueText"
                                        :data="treeData"
                                        :props="{
                                            label: 'label',
                                            value: 'value',
                                            children: 'children',
                                        }"
                                        clearable
                                        placeholder="请选择下单人"
                                        :suffix-icon="IconDropDown"
                                        @change="handleSelectionChange"
                                        filterable 
                                        />
                        </div>
                        </div>

                        <div class="tableInfo">
                            <div>已点商品：<span style="color: #FF6A00;">{{ goodsTotalData.totalCount }}项</span></div>
                            <div>合计：<span style="color: #FF6A00;">¥<span style="font-size: 22px;">{{
                                goodsTotalData.totlePrice.toFixed(2)}}</span></span></div>
                        </div>

                        <div class="MenuTitle">
                            <div>商品</div>
                            <div>价格</div>
                            <div>数量</div>
                            <div>操作</div>
                        </div>

                        <div v-if="menuGoodsList.length == '0'" class="foolNull">
                            <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/foolNull.png">
                            <div>请在右侧添加商品</div>
                        </div>
                        <div  class="MenuMain">
                            <div class="MenuList">
                                <div class="MenuItem" v-for="(item, index) in menuGoodsList" :key="index"
                                    :class="{ MenuItemActive: index == isMenuItemActive }" @click="editItem(item, index)">
                                    <div class="goodsTitle">
                                        <div class="name" v-if="item.priceList[0].detail"><span
                                                v-if="item.groupTypeName == '套餐'">{{ item.groupTypeName }}</span>{{
                                                    item.goodsName }}</div>
                                        <div class="name" v-if="!item.priceList[0].detail">{{ item.priceList[0].goodsName +
                                            '（' + item.priceList[0].uomName + '）' }}</div>
                                        <div class="price">¥ {{ (item.priceList[0].salePrice * item.count).toFixed(2) }}</div>
                                        <div class="count">{{ item.count }}</div>
                                    </div>
                                    <div class="goodsTaste" v-if="item.flavors">{{ item.flavors.toString() }}</div>
                                    <div v-for="(i, s) in item.priceList" :key="s" v-if="item.priceList[0].detail">
                                        <div class="goodsMinutia" v-if="!item.priceList[0].detail">
                                            <div class="dot"></div>
                                            <div class="typ">{{ i.goodsName + '（' + i.uomName + '）' }}</div>
                                        </div>
                                        <div class="goodsMinutia" style="display: block;">
                                            <div v-for="(v, s) in item.priceList[0].detail" :key="s"
                                                style="display: flex; align-items: center;">
                                                <div class="dot"></div>
                                                <div class="typ">{{ v.goodsName }}</div>
                                                <div class="fvor" v-if="v.flavors">{{ '（' + v.flavors.toString()
                                                    + '）' }}</div>
                                                <div class="count">{{ 'x' + v.defaultQty }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="listRemark" v-if="orderRemark">
                                    <div>备注：{{ orderRemark }}</div>
                                </div>
                            </div>
                            <div class="menuOperation">
                    <div @click="countAdd()">数量<img
                         src="https://oss.jtmckj.com/pc/images/orderDishes/add.png" alt=""></div>
                    <div @click="countSubtract()">数量<img
                            src="https://oss.jtmckj.com/pc/images/orderDishes/subtract.png" alt=""></div>
                    <div @click="editCount()">修改数量</div>
                    <div @click="flavorsShow()">选择口味</div>
                    <div @click="menuGoodsList[isMenuItemActive].flavors = ''">删除口味</div>
                    <div @click="delGoods()">删除商品</div>
                    <div @click="removeGoods()">清空商品</div>
                    <div @click="remarkModal()">整单备注</div>
                    <!-- <div>叫起</div> -->
                    <!-- <div>{{ priceList.priceList }}</div> -->
                </div>
                        </div>
                        <!-- <div class="orderPage">
                    <div>上一页</div>
                    <div>下一页</div>
                </div> -->
                    </div>
                    <div class="xdbz-contianr">
                         <!-- <div class="bz-title">整单备注：不要辣</div> -->
                         <div class="bz-title">&nbsp;</div>
                         <img v-if="goodsTotalData.totalCount > 8 " src="https://oss.jtmckj.com/wmp/jfsc/pay/ts-icon.png" class="ts-icon" alt="">
                    </div>
                    <div class="orderCheckout">
                        <div @click="placeOrder" v-has-role="'order-order'">下单</div>
                        <div @click="placeCheckout" v-has-role="'order-checkout'">结账</div>
                    </div>
                    <!-- <div @click="jump()">获取已点商品列表单号{{ orderBatchCode }}</div> -->
                </div>

                
            </div>

            <div class="boxRight">
                <div class="goodsBox">
                    <div class="goodsLeft">
                        <div class="menuScroll">
                            <div class="goodsMenu-ff">
                                <div class="goodsMenu">
                                <div class="title_box" :class="{ TypeActive: isTypeActive == '-1' }" @click="changeType('', '-1')">
                                    <div class="title-out">
                                        <div class="title">全部</div>
                                    </div>
                                    
                                </div>
                                <div class="title_box" v-for="(item, index) in GoodsTypeList" :key="index"
                                :class="{ TypeActive: index == isTypeActive}" @click="changeType(item, index)">
                                    <div class="title-out">
                                        <div class="title">{{item.goodsTypeName }}</div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="SearchBtn" @click="keyPressShow = true">按简码搜索</div>
                        </div>
                        <div class="sCodeSearch">
                           
                            <div class="SearchPanel" v-if="keyPressShow">
                                <div class="SearchHead">
                                    <div class="SearchBar">
                                        <!-- <div>{{ goodsCode }}</div> -->
                                        <input type="text" v-model="goodsCode"  placeholder="请输入菜品简码">
                                        <span @click="SearchBtn()">搜索</span>
                                    </div>
                                    <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/close.png"
                                        style="cursor: pointer;" @click="keyPressClose">
                                </div>
                                <div class="SearchKey">
                                    <div v-for="(item, index) in keyboard" :key="index" @click="keyPress(item)">{{ item }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="goodsRight">
                        <div :class="{ goodsItemAmi: item.ami }" v-for="(item, index) in GoodsList"
                            :key="index" @click="addGoods(item)">
                            <div class="goodsItem">
                                <div class="goodsLogoS">
                                    <img v-if="item.isUseGold == '1'" class="img-jinbi" src="https://oss.jtmckj.com/wmp/qnjg/center/icon_jinbi.png" alt=""> 
                                    <img v-if="item.attachment" :src="item.attachment" class="goodsLogo">
                                    <img v-else :src="PCMaterialPic" class="goodsLogo">
                                    <div class="goodsVipPrice">
                                        <!-- {{ item.isUseGold == "1" ? "1" : "0" }} -->
                                        会员价:￥{{ item.vipPrice }}
                                    </div>
                                </div>
                                <div class="goodsName"><span v-if="item.groupTypeName == '套餐'">{{ item.groupTypeName }}</span>{{item.goodsName }}</div>
                                <div class="goodsPrice">￥{{ item.salePrice }}</div>
                                <div class="Mask" v-if="item.state != '0' && item.isEstmClear == '1'" @click.stop>
                                    <div>已售罄</div>
                                </div>
                                <div class="Mask" v-if="item.state == '0'" @click.stop>
                                    <div>已下架</div>
                                </div>
                            </div>
                            
                        </div>
                        <div class="goodsPage" v-if="totalPages > 1">
                            <div class="pageUp" :class="{ disbPages: disbPageUp == true }" @click="pageUp()">上一页</div>
                            <div class="pageDown" :class="{ disbPages: disbPageDown == true }" @click="pageDown()">下一页</div>
                        </div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <el-dialog title="修改数量" v-model="digitaShow" width="22%" destroy-on-close :show-close="false" center
                class="menuDialog">
                <div class="digitalPanel">
                    <el-input v-model="tempNum" @input="oninput()" @keydown.prevent></el-input>
                    <div class="digitalNum">
                        <div class="numBtn" @click="oninput('1')">1</div>
                        <div class="numBtn" @click="oninput('2')">2</div>
                        <div class="numBtn" @click="oninput('3')">3</div>
                        <div class="numBtn" @click="delinput(tempNum)"><img
                                src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/del.png"
                                style="width: 40px; height: auto;"></div>
                        <div class="numBtn" @click="oninput('4')">4</div>
                        <div class="numBtn" @click="oninput('5')">5</div>
                        <div class="numBtn" @click="oninput('6')">6</div>
                        <div class="numBtn" @click="removeinput()">删除</div>
                        <div class="numBtn" @click="oninput('7')">7</div>
                        <div class="numBtn" @click="oninput('8')">8</div>
                        <div class="numBtn" @click="oninput('9')">9</div>
                        <div class="numBtn" @click="oninput('0')">0</div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="digitaShow = false">取 消</el-button>
                        <el-button @click="subNum()">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog title="选择口味" v-model="tasteShow" width="45%" destroy-on-close :show-close="false" center
                class="menuDialog">
                <div class="tasteContent">
                    <div class="tasteClass">
                        <div @click="changeFlavor('', '-1')" :class="{ FlavorActive: isFlavorActive == '-1' }">全部</div>
                        <div v-for="(item, index) in flavorList" :key="index" @click="changeFlavor(item, index)"
                            :class="{ FlavorActive: index == isFlavorActive }">{{ item.name }}</div>
                    </div>
                    <div class="tasteList">
                        <div class="tasteItem" v-for="(item, index) in flavorItemS" :key="index" @click="ChoseFlavor(item)"
                            :class="{ tasteActive: item.state }">{{ item.name }}</div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="tasteShow = false">取 消</el-button>
                        <el-button @click="subFlavor(thisGoodsFlavor)">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog title="整单备注" v-model="remarkShow" width="45%" destroy-on-close :show-close="false" center
                class="menuDialog">
                <div class="remarkContent">
                    <textarea cols="30" rows="10" placeholder="请输入口味备注" v-model="remark"></textarea>
                    <div @click="remark = ''">清除</div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="remarkShow = false">取 消</el-button>
                        <el-button @click="remarkShow = false, orderRemark = remark">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <!-- <el-dialog v-model="packGoodsShow" width="63%" destroy-on-close :show-close="false" center class="packDialog">
                <div class="packContent">
                    <div class="packHead">
                        <div class="packName">{{ modalItemData.goodsName }}</div>
                        <div class="packPrice">￥<span>{{ modalItemData.salePrice }}</span></div>
                    </div>
                    <div class="packBody">
                        <div class="packLeft">
                            <div class="packTip">套餐包含以下菜品</div>
                            <div style="width: 100%; overflow-x: hidden;">
                                <div class="packList">
                                    <div class="packItem" v-for="(item, index) in modalItemData.priceList[0].detail"
                                        :key="index" :class="{ packItemChose: index == PackIndex }"
                                        @click="chosePack(item.goodsDetail, index)">
                                        <div class="groupTop">
                                            <div class="groupName">{{ item.groupName }}</div>
                                            <div class="groupCount">可选数量<span>{{ item.maxQty }}</span>，已选<span
                                                    style="color: #FF6A00;">{{ item.allQty }}</span></div>
                                        </div>
                                        <div class="groupbottom" v-for="(i, s) in item.goodsDetail" :key="s">
                                            <div class="groupGoods">
                                                <div class="goodsName">{{ i.goodsName }}</div>
                                                <div class="goodsCount">{{ i.defaultQty }}</div>
                                                <div class="goodsunit">{{ i.uomName }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="packRight">
                            <div class="allocationTip" v-if="PackDetail">套餐配置</div>
                            <div class="allocationList" v-if="PackDetail">
                                <div class="allocationItem" v-for="(item, index) in PackDetail" :key="index">
                                    <div :class="{ goodsClear: item.isEstmClear == 1 }">
                                        <div class="itemName" :class="{ itemNameChose: index == flavorIndex }"
                                            @click="getPackFlavorS(item.goodsFlavor, index)">{{ item.goodsName }}<span
                                                v-if="item.isEstmClear == 1">(沽清)</span></div>
                                    </div>

                                    <div class="itemNum" :class="{ operType4: operType == 4 || item.isEstmClear == 1 }">
                                        <div class="reduce" @click="PackDetailReduce(index)">-</div>
                                        <div class="num">{{ item.defaultQty }}</div>
                                        <div class="add" @click="PackDetailAdd(index)">+</div>
                                    </div>
                                </div>
                            </div>

                            <div class="allocationTaste">
                                <div class="tasteTip">
                                    <span v-if="PackDetail[flavorIndex].goodsFlavor.length == 0">商品暂无口味</span>
                                    <span v-if="PackDetail[flavorIndex].goodsFlavor.length > 0">口味</span>
                                </div>
                                <div class="tasteList">
                                    <div v-for="(item, index) in PackDetail[flavorIndex].goodsFlavor" :key="index"
                                        :class="{ tasteActive: item.flavorState }" @click="MultipleT(item)">
                                        {{ item.Name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="packGoodsShow = false">取 消</el-button>
                        <el-button @click="packAllSub(modalItemData.priceList[0].detail)">确 定</el-button>
                    </span>
                </template>
            </el-dialog> -->


            <ComboSelect v-if="packGoodsShow" v-model="packGoodsShow" :modalItemData="modalItemData" :toolPackDetail="PackDetail" @cancel="packGoodsShow = false" @confirm="packAllSub"/>

            <el-dialog title="规格" v-model="priceShow" width="15%" destroy-on-close :show-close="false" center
                style="border-radius: 10px;" class="FlavorDialog">
                <div style="padding: 10px 0; text-align: center; cursor: pointer; background-color: #E6E6E6; margin-bottom: 10px; border-radius: 10px;" v-for="(item, index) in priceTypes.priceList" :key="index" @click="setPriceIndex(index,item)" :class="{ setPrices: setPriceIndexVal == index }">
                    {{ item.goodsName + '（' + item.uomName + '）' }}<span v-if="item.isEstmClear == '1'">(沽清)</span>
                </div>
                <div v-for="(zv,zk) in modFlavor" :key="zk">
                    <div>
                        {{ zv.Name }}
                        <span v-if="zv.IsMultiple == '1'">(多选)</span>
                        <span v-if="zv.IsMultiple != '1'">(单选)</span>
                    </div>
                    <div class="modFlavor">
                        <div v-for="(item, index) in zv.FlavorStr" :key="index"
                            @click="modFlavorChange(zv.IsMultiple,zk,index)" :class="{ isActs: item.isAct == true }">{{
                                item.name }}</div>
                    </div>
                </div>
                <div class="btnS">
                    <div @click="priceShow = false" class="btn">取消</div>
                    <div @click="priceIndex(setPriceIndexVal)" class="btn">确定</div>
                </div>
            </el-dialog>
            <el-dialog class="container" v-model="payZero" title="提示" center :show-close="false" >
                <div class="content-box">
                    商品金额为0，确认结账？
                </div>
                <div class="footer-box">
                    <el-button class="cancel" @click="payZero = false">取消</el-button>
                    <el-button class="submit" @click="handleSubmit">确认</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    <LoadingSpinner :visible="orderFlag" />
</template>

<script setup>
import Api from '@/api'
import useConfigStore from '@/store/config'
import useGoodsStore from '@/store/goods'
import ls from '@/lib/ls'
import { getLocalIPv4 } from "@/utils/getip.js";
import ComboSelect from '@/views/components/ComboSelect.vue'
import { useRouter } from 'vue-router'
import { Alignment } from 'element-plus/es/components/table-v2/src/constants';
const PCMaterialPic = useConfigStore().shopInfo.PCMaterialPic

const router = useRouter()
const configStore = useConfigStore()
const goodsStore = useGoodsStore()
const digitaShow = ref(false)
const tasteShow = ref(false)
const remarkShow = ref(false)
const keyPressShow = ref(false)
const packGoodsShow = ref(false)
const tempNum = ref('')
const GoodsList = ref('')
const modalItemData = ref({})
const PackDetail = ref({})
const PackFlavor = ref('')
const menuGoodsList = ref([])
const orderRemark = ref('')
const isMenuItemActive = ref('0')
const isTypeActive = ref('-1')


// ------------------------------------------------- 条形码 -------------------------------------------------------
const form = ref({
    code: ''
})
// 查询条形码信息
const searchTicket = (params) => {
    if (!form.value.code) return
    console.log(form.value.code)
    console.log(goodsStore.goodsList);
    const result = goodsStore.goodsList.filter(goods => form.value.code === goods.barcode);
    if(result && result[0]){
        addGoods(result[0])
        form.value.code = ''
    }else{
        ElNotification({
            title: '提示',
            message: '未找到商品',
            type: 'error',
            duration: 3000 // 设置通知显示时间为3秒
        }) 
        form.value.code = ''
    }

}

// ---------------------------------------------------- 获取口味 -------------------------------------------------------
const flavorList = ref([])
const getFlavorList = ()=>{
 Api.Common.PcObjProcess.Do({ functionName: "GetFlavorPc", "contentData":{"typeCode":"577"}})
     .then(res => {
         console.log(res.result);
         flavorList.value = res.result
         res.result.forEach(item=>{
           Api.Common.PcObjProcess.Do({ functionName: "GetFlavorPc", "contentData":{"typeCode":item.code}})
             .then(resSec => {
                 resSec.result.map(vi=>vi.state = false)
                 flavorList.value.find(v=>{
                   if(v.code == item.code){
                     v.arr = resSec.result
                   }
                 })
                 console.log(flavorList.value);
                 
             })
             .catch(err=>{

             })
         })
         // this.FlavorList = resp.result
     })
     .catch(err=>{

     })
}
getFlavorList()


const flavorItemS = ref([])
const isFlavorActive = ref('-1')
const priceShow = ref(false)

//规格口味
const modFlavorChange = (isMultiple,zk,index) => {
    console.log(modFlavor.value);
    
    if (isMultiple == '1') {
        modFlavor.value[zk].FlavorStr[index].isAct = !modFlavor.value[zk].FlavorStr[index].isAct
    } else {
        modFlavor.value[zk].FlavorStr.map(e => {
            e.isAct = false
        })
        modFlavor.value[zk].FlavorStr[index].isAct = true
    }
}
//多选
const multiple = (isAct) => {
    console.log('多')
}

//商品分类列表
const GoodsTypeList = ref('')
const GetGoodsTypeOrg = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetGoodsTypeOrg", "orgCode": "0004", "contentData": "" })
        .then(res => {
            console.log(res)
            GoodsTypeList.value = res.result
        })
}
const changeType = (item, index) => {
    if (index == isTypeActive.value) {
        return
    } else {
        isTypeActive.value = index
        let typeCode = ''
        if (item) {
            typeCode = item.goodsTypeCode
        } else {
            typeCode = ''
        }
        GoodsList.value = ''
        goodsInfoPar.value = { pageIndex: 1, pageSize: 17, shortName: goodsCode.value, goodsType: typeCode }
        getGoodsInfo()
    }
}
const keyPressClose = () => {
    keyPressShow.value = false
    goodsInfoPar.value.shortName = ''
    goodsCode.value = ''
    getGoodsInfo()
}
const totalPages = ref('')

//菜品简码输入框
const goodsCode = ref('')
//获取商品列表
const goodsInfoPar = ref({ pageIndex: 1, pageSize: 17, shortName: '',goodsType:'' })
const getGoodsInfo = async () => {
   
    // 过滤筛选  分类选择  简码搜索
    function filterItems(items, goodsType, shortName) {
        if(goodsType && shortName){
            return items.filter(item =>
                item.goodsType.split(',').includes(goodsType) && (item.shortName.includes(shortName) || item.goodsName.includes(shortName))
            );
        }else if(!goodsType && shortName){
            return items.filter(item =>
                (item.shortName.includes(shortName) || item.goodsName.includes(shortName))
            );
        }else if(goodsType && !shortName){
            return items.filter(item =>
                item.goodsType.split(',').includes(goodsType) 
            );
        }else{
            return items
        }
    }
    // 分页
    function filterAndPaginateItems(items,pageIndex, pageSize) {
        // 计算分页起始和结束索引
        const startIndex = (pageIndex - 1) * pageSize;
        const endIndex = startIndex + pageSize;

        // 获取分页后的数据
        const paginatedItems = items.slice(startIndex, endIndex);

        return paginatedItems;
    }
    console.log(goodsStore.goodsList,'goodsStore.goodsList');
    let toolArr = goodsStore.goodsList.filter(v=>{return v.state != '0'})
    toolArr = await new Promise((resolve) => {
		    resolve(toolArr.sort((a, b) => b.indexStr - a.indexStr));
	});  
    console.log(toolArr,'toolArr');
    const arr = filterItems(toolArr, goodsInfoPar.value.goodsType, goodsInfoPar.value.shortName);
    console.log(arr,'arr1');
    const filteredItems = filterAndPaginateItems(arr,goodsInfoPar.value.pageIndex,goodsInfoPar.value.pageSize )
    let res = {
        totalCount:arr.length,
        data:filteredItems
    }
    console.log(filteredItems,'filteredItems');
    // Api.Common.PcObjProcess.Do({ "functionName": "getGoodsInfo", "contentData": goodsInfoPar.value }).then(res => {
            console.log('获取商品列表 res :>> ', res);
            isPageBtn(goodsInfoPar, res.totalCount)

            totalPages.value =  Math.ceil(res.totalCount / goodsInfoPar.value.pageSize)
            // return
            GoodsList.value = res.data
            if (res.data.length > 0) {
                GoodsList.value = res.data
            } else {
                goodsInfoPar.value.pageIndex--
            }
            GoodsList.value.forEach(good => {
                good.isUseGold = good.isUseGold || "0"
                good.priceList.forEach(item => {
                    if (item.isUseGold == "1") {
                        good.isUseGold = "1"
                    }
                })
            })
            // GoodsList.value.forEach((good,gindex)=>{
            //     good.indexStr = gindex+1
            //     good.priceList.forEach(price => {
            //         price.indexStr =  gindex+1
            //         if(price.detail && price.detail.length>0){
            //             price.detail.forEach(d => {
            //                 d.indexStr = gindex+1
            //                 if(d.goodsDetail && d.goodsDetail.length>0){
            //                     d.goodsDetail.forEach(g => {
            //                         g.indexStr = gindex+1
            //                     })
            //                 }
            //             })
            //         }
            //     })
            // })

            console.log('GoodsList.value :>> ', GoodsList.value);
    // })
}


//上一页，下一页
const pageUp = () => {
  if (goodsInfoPar.value.pageIndex > 1) {
    goodsInfoPar.value.pageIndex --
    getGoodsInfo()
  }
}
const pageDown = () => {
  goodsInfoPar.value.pageIndex++
  getGoodsInfo()
}


//翻页按钮是否显示
const disbPageUp = ref(false)
const disbPageDown = ref(false)
const isPageBtn = (goodsInfoPar, totalCount) => {
    console.log(goodsInfoPar, totalCount)
    let num1 = totalCount;
    let num2 = goodsInfoPar.value.pageSize;
    let quotient = '';
    if (num1 % num2 == 0) {
        quotient = parseInt(num1 / num2)
    } else {
        quotient = parseInt(num1 / num2) + 1
    }
    if (goodsInfoPar.value.pageIndex <= 1) {
        disbPageUp.value = true
    } else { disbPageUp.value = false }
    if (goodsInfoPar.value.pageIndex >= quotient) {
        disbPageDown.value = true
    } else { disbPageDown.value = false }
}
//上下页
const PageUp = () => {
    if (goodsInfoPar.value.pageIndex > '1') {
        goodsInfoPar.value.pageIndex--
        getGoodsInfo()
    }
}
const PageDown = () => {
    goodsInfoPar.value.pageIndex++
    getGoodsInfo()
}
const indexStrV = ref(0)
const addGoods = (i) => {
    i.ami = true
    setTimeout(() => {
        i.ami = false
    }, 1000)
    goodsCode.value = ''
    setPriceIndexVal.value = '0'
    isMenuItemActive.value = '0'
    if (i.type == '2') {
        packModalShow(i) // 套餐
    } else {
        if (i.priceList.length > 1 || i.goodsFlavor) {
            priceType(i) // 选规格
            
        } else { // 单品
            console.log(i);
            // 起售数量获取
            if(!i.priceList[0].saleLimitMax || i.priceList[0].saleLimitMax == '0'){
                i.saleLimitMax =  999
            }
            
            i.saleLimitMin = Number(i.priceList[0].saleLimitMin) ? Number(i.priceList[0].saleLimitMin) : 1
            i.saleLimitStep = Number(i.priceList[0].saleLimitStep) ? Number(i.priceList[0].saleLimitStep) : 1

            let temp = { count: i.saleLimitMin } // 默认最少起售数量
            Object.assign(i, temp)
            i.indexStr = indexStrV.value++
            menuGoodsList.value.unshift(JSON.parse(JSON.stringify(i)))
            goodsTotal()
        }
    }
}
const priceTypes = ref('')
const modFlavor = ref('')
const priceType = (i) => {
    console.log(i);
    
    let flavors = ''
    if (i.goodsFlavor) {
        flavors = JSON.parse(i.goodsFlavor)
        console.log(flavors);
        flavors.forEach(item=>{
            // item.FlavorStr = item.FlavorStr.split(',')
            item.FlavorStr = [item.FlavorStr]
            let a = {
                name: '',
                isAct: false
            }
            let data = []
            item.FlavorStr.map(e => {
                a.name = e
                data.push(JSON.parse(JSON.stringify(a)))
            })
            item.FlavorStr = data
        })
        
    }
    modFlavor.value = flavors
    console.log(modFlavor.value);
    if(modFlavor.value){
        modFlavor.value.forEach((vz,vk)=>{
            vz.FlavorStr.forEach((v, k) => {
                    
                    if(typeof v.name == 'string'){
                        
                        const str = v.name;
    
                        // 替换中文逗号为英文逗号
                        const normalizedStr = str.replace(/，/g, ',');
                        // 使用英文逗号分隔字符串
                        const parts = normalizedStr.split(',');
                        // 将每个部分转换为对象
                        const result = parts.map(part => {
                            // 默认值
                            let name = part.trim();
                            let addprice = 0;
                            let isAct = false;
                            // 检查是否有#，设置isAct
                            if (name.includes('#')) {
                                isAct = true;
                                name = name.replace('#', '').trim();
                            }
                            // 检查是否有*，设置addprice
                            const match = name.match(/\*(\d+)$/);
                            if (match) {
                                addprice = parseInt(match[1], 10);
                                name = name.replace(match[0], '').trim();
                            }
                            return { name, addprice, isAct };
                        });
                        v.list = result
                    }
                  
                    
            })

            console.log(vz);
            if(vz.FlavorStr[0].list){
                vz.FlavorStr = vz.FlavorStr[0].list
            }
            console.log(vz);

        })
       
    }
    
    priceShow.value = true
    i.indexStr = indexStrV.value++
    priceTypes.value = i
    priceTypes.value = JSON.parse(JSON.stringify(priceTypes.value))
    console.log(i.priceList)
}
const setPriceIndexVal = ref('0')
const setPriceIndex = (index,item) => {
    if(item.isEstmClear == '1'){
        ElNotification({
            title: '提示',
            message: '该规格已设为估清',
            type: 'error',
        }) 
        return
    }
    setPriceIndexVal.value = index
}
const priceIndex = (index) => {
    if(priceTypes.value.priceList[setPriceIndexVal.value].isEstmClear == '1'){
        ElNotification({
            title: '提示',
            message: '该规格已设为估清',
            type: 'error',
        }) 
        return
    }
    goodsCode.value = ''
    priceShow.value = false
    let a = priceTypes.value.priceList[setPriceIndexVal.value]
    priceTypes.value.priceList = []
    priceTypes.value.priceList.push(a)
    let temp = { count: '1', flavors: [] }
    if (modFlavor.value) {
        console.log(modFlavor.value);
        modFlavor.value.forEach(item=>{
            item.FlavorStr.map(e => {
                if (e.isAct == true) {
                    temp.flavors.push(e.name)
                }
            })
        })
        
        // temp.flavors = modFlavor.value.FlavorStr
    }
    if(!priceTypes.value.priceList[0].saleLimitMax || priceTypes.value.priceList[0].saleLimitMax == '0'){
        priceTypes.value.saleLimitMax = 999
    }
    
    priceTypes.value.saleLimitMin = Number(priceTypes.value.priceList[0].saleLimitMin) ? Number(priceTypes.value.priceList[0].saleLimitMin) : 1
    priceTypes.value.saleLimitStep = Number(priceTypes.value.priceList[0].saleLimitStep) ? Number(priceTypes.value.priceList[0].saleLimitStep) : 1
   
    Object.assign(priceTypes.value, temp)
    priceTypes.value.count = priceTypes.value.saleLimitMin
    menuGoodsList.value.unshift(JSON.parse(JSON.stringify(priceTypes.value)))
    goodsTotal()
    console.log(menuGoodsList.value)
}
const editItem = (i, s) => {
    console.log(i, s)
    isMenuItemActive.value = s;
}
const packModalShow = (i) => {
    console.log(i)
    PackFlavor.value = ''
    packGoodsShow.value = true
    i.indexStr = indexStrV.value++
    i.priceList[0].detail.map(e => {
        e.allQty = 0
        console.log(e.goodsDetail);
        
        e.goodsDetail.map(s => {
            if(s.isEstmClear != '1'){
                e.allQty = e.allQty + Number(s.defaultQty)
            }
            if(s.isEstmClear == '1'){
                s.defaultQty = 0
            }
        })
    })
    console.log(i)
    i.priceList[0].detail.map(e => {
        e.goodsDetail.map(s => {
            if (typeof (s.goodsFlavor) != 'string') {
                s.goodsFlavor.map(v => {
                    v.flavorState = false
                })
            }
        })
    })
    modalItemData.value = i
    console.log(modalItemData.value.priceList[0].detail);
    modalItemData.value.priceList[0].detail.forEach(detail=>{
        detail.goodsDetail.forEach(detailV=>{
            let flavor = detailV.goodsFlavor
            if (flavor) {
                let newFlavor = ''
                if (typeof (flavor) == 'string') {
                    newFlavor = JSON.parse(flavor)
                } else {
                    newFlavor = flavor
                }
                newFlavor.map(e => {
                    if (e.flavorState == undefined) {
                        e.flavorState = false
                    }
                })
                console.log(newFlavor);
                newFlavor.forEach(item=>{
                    if(typeof item.FlavorStr == 'string'){
                                
                                const str = item.FlavorStr;
            
                                // 替换中文逗号为英文逗号
                                const normalizedStr = str.replace(/[，,]/g, ',');
                                // 使用英文逗号分隔字符串
                                const parts = normalizedStr.split(',');
                                // 将每个部分转换为对象
                                const result = parts.map(part => {
                                    // 默认值
                                    let uomName = part.trim();
                                    let addprice = 0;
                                    let select = false;
                                    // 检查是否有#，设置select
                                    if (uomName.includes('#')) {
                                        select = true;
                                        uomName = uomName.replace('#', '').trim();
                                    }
                                    // 检查是否有*，设置addprice
                                    const match = uomName.match(/\*(\d+)$/);
                                    if (match) {
                                        addprice = parseInt(match[1], 10);
                                        uomName = uomName.replace(match[0], '').trim();
                                    }
                                    return { uomName, addprice, select };
                                });
                                console.log(result);
                                
                                item.sizeList = result
                                
                    }
                })
                
                // PackFlavor.value = newFlavor
                detailV.goodsFlavor = newFlavor

                const result = newFlavor.map(vitem => {
                // 获取 sizeList 中 select 为 true 的 uomName 并拼接成字符串
                const flavor = vitem.sizeList
                    .filter(obj => obj.select)        // 过滤出 select 为 true 的对象
                    .map(obj => obj.uomName)          // 提取每个符合条件的 uomName
                    .join(',');                       // 使用 ',' 连接成一个字符串
                
                return flavor;                      // 直接返回拼接后的字符串
                });
                console.log(result);
                
                detailV.flavor = result.filter(obj => obj).join(',');
                console.log(detailV)
            }
        })
    })
    chosePack(modalItemData.value.priceList[0].detail[0].goodsDetail, '0')
}
// 选择套餐
const PackIndex = ref(0)
const operType = ref('')
const chosePack = (detail, index) => {
    console.log(detail);
    console.log(modalItemData.value.priceList[0].detail);
    modalItemData.value.priceList[0].detail.forEach(item=>{
        item.goodsDetail.map(v=>{
            v.choiceType = item.choiceType
            v.isSelect = false
            v.operType = item.operType
        })
    })
    operType.value = modalItemData.value.priceList[0].detail[index].operType
    // let choiceType  = modalItemData.value.priceList[0].detail[index].choiceType
    PackIndex.value = index
    // return
    flavorIndex.value = 0
    PackDetail.value = detail
    // PackDetail.value.map(item=>{
    //     item.choiceType = choiceType
    //     item.isSelect = false
    //     item.operType = operType.value
    // })
    console.log(detail);
    
    // getPackFlavorS(detail[0].goodsFlavor, '0')
  
}
// 获取套餐单品口味
const flavorIndex = ref(0)
// const getPackFlavorS = (flavor, index) => {
//     flavorIndex.value = index
//     if (flavor) {
//         let newFlavor = ''
//         if (typeof (flavor) == 'string') {
//             newFlavor = JSON.parse(flavor)
//         } else {
//             newFlavor = flavor
//         }
//         newFlavor.map(e => {
//             if (e.flavorState == undefined) {
//                 e.flavorState = false
//             }
//         })
//         console.log(newFlavor);
//         newFlavor.forEach(item=>{
//             if(typeof item.FlavorStr == 'string'){
                        
//                         const str = item.FlavorStr;
    
//                         // 替换中文逗号为英文逗号
//                         const normalizedStr = str.replace(/[，,]/g, ',');
//                         // 使用英文逗号分隔字符串
//                         const parts = normalizedStr.split(',');
//                         // 将每个部分转换为对象
//                         const result = parts.map(part => {
//                             // 默认值
//                             let uomName = part.trim();
//                             let addprice = 0;
//                             let select = false;
//                             // 检查是否有#，设置select
//                             if (uomName.includes('#')) {
//                                 select = true;
//                                 uomName = uomName.replace('#', '').trim();
//                             }
//                             // 检查是否有*，设置addprice
//                             const match = uomName.match(/\*(\d+)$/);
//                             if (match) {
//                                 addprice = parseInt(match[1], 10);
//                                 uomName = uomName.replace(match[0], '').trim();
//                             }
//                             return { uomName, addprice, select };
//                         });
//                         console.log(result);
                        
//                         item.sizeList = result
                        
//             }
//         })
        
//         // PackFlavor.value = newFlavor
//         PackDetail.value[flavorIndex.value].goodsFlavor = newFlavor

//         const result = newFlavor.map(vitem => {
//         // 获取 sizeList 中 select 为 true 的 uomName 并拼接成字符串
//         const flavor = vitem.sizeList
//             .filter(obj => obj.select)        // 过滤出 select 为 true 的对象
//             .map(obj => obj.uomName)          // 提取每个符合条件的 uomName
//             .join(',');                       // 使用 ',' 连接成一个字符串
        
//         return flavor;                      // 直接返回拼接后的字符串
//         });
//         console.log(result);
        
//         PackDetail.value[flavorIndex.value].flavor = result.filter(obj => obj).join(',');
//         console.log(PackDetail.value)
//     }
// }


// 套餐提交
const packAllSub = (itemS) => {
    console.log(itemS);
    let item = []
    itemS.map(e => {
        e.goodsDetail.map(s => {
            item.push(s)
        })
    })
    console.log(item);
    
    item.forEach(v=>{
        if(v.choiceType == '1' && !v.isSelect && v.operType =='0'){
                v.defaultQty = 0
        }
    })
    
    let allQty = modalItemData.value.priceList[0].detail[PackIndex.value].allQty
    let maxQty = modalItemData.value.priceList[0].detail[PackIndex.value].maxQty
    modalItemData.value.count = '1'
        item.map(e => {
            e.flavors = e.flavor
            // e.flavors = []
            // if (typeof (e.goodsFlavor) != 'string') {
            //     e.goodsFlavor.map(s => {
            //         if (s.flavorState == true) {
            //             e.flavors.push(s.Name)
            //         }
            //     })
            // }
        })
        let modalItemDataS = JSON.parse(JSON.stringify(modalItemData.value))
        modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail = []

        let packPrice = modalItemData.value.salePrice // 获取套餐的销售价格
        let vipPackPrice = modalItemData.value.vipPrice // 获取套餐的vip价格
        console.log(item);
        let totalPrice = item.reduce((sum, v) => {
            return sum + (v.defaultQty * v.salePrice);
        }, 0);
        item.map(v=>{
            v.percentPrice = parseInt(packPrice * v.salePrice * v.defaultQty / totalPrice)
            v.vipPercentPrice = parseInt(vipPackPrice * v.salePrice * v.defaultQty / totalPrice)
        })
        let percentPriceTemp = item.reduce((sum, v) => {
            return sum + v.percentPrice;
        }, 0);
        let vipPercentPriceTemp = item.reduce((sum, v) => {
            return sum + v.vipPercentPrice;
        }, 0);
       
        item = item.filter(v => v.defaultQty > 0);

        item[item.length - 1].percentPrice += (packPrice - percentPriceTemp)
        item[item.length - 1].vipPercentPrice += (vipPackPrice - vipPercentPriceTemp)
        item.map(e=>{
            if (e.defaultQty > 0) {
                modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail.push(e)
            }
        })
        console.log(modalItemDataS.priceList[0].detail[PackIndex.value]);
        
        // 原比例价格计算逻辑
        // let a = []
        // let tots = 0
        // item.map((e, i) => {
        //     let b = {
        //         unit: e.salePrice,
        //         tot: e.salePrice * e.defaultQty
        //     }
        //     console.log(b)
        //     a.push(b)
        //     tots += b.tot
        //     if (e.defaultQty > 0) {
        //         modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail.push(e)
        //     }
        // })
        // let c = []
        // let d = []
        // a.map(e => {
        //     c.push(packPrice * (e.tot / tots))
        //     d.push(vipPackPrice * (e.tot / tots))
        // })
        // console.log(a);
        
        // item = item.filter(v => v.defaultQty > 0);
        // let percentPriceTemp = 0
        // let vipPercentPriceTemp = 0
        // for (let i = 0; i < item.length; i++) {
        //     item[i].percentPrice = parseInt(c[i])
        //     item[i].vipPercentPrice = parseInt(d[i])
        //     percentPriceTemp += item[i].percentPrice
        //     vipPercentPriceTemp += item[i].vipPercentPrice
        // }
        // item[item.length - 1].percentPrice += (packPrice - percentPriceTemp)
        // item[item.length - 1].vipPercentPrice += (vipPackPrice - vipPercentPriceTemp)
        // return
        let goodsDetail = modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail
     
        modalItemDataS.priceList[0].detail = goodsDetail
        menuGoodsList.value.unshift(JSON.parse(JSON.stringify(modalItemDataS)))
        
        packGoodsShow.value = false
        goodsTotal()
}
//数量加减
const countAdd = () => {
    console.log(menuGoodsList.value[isMenuItemActive.value])
    if (menuGoodsList.value[isMenuItemActive.value].count >= 999) {
        alert('超出最大数量')
    } else {
        if(menuGoodsList.value[isMenuItemActive.value].saleLimitStep){
            menuGoodsList.value[isMenuItemActive.value].count += menuGoodsList.value[isMenuItemActive.value].saleLimitStep
        }else{
            menuGoodsList.value[isMenuItemActive.value].count ++
        }
        
    }
    goodsTotal()
}
const countSubtract = () => {
    if(menuGoodsList.value[isMenuItemActive.value].saleLimitStep){
        if ((menuGoodsList.value[isMenuItemActive.value].count - menuGoodsList.value[isMenuItemActive.value].saleLimitStep) < menuGoodsList.value[isMenuItemActive.value].saleLimitMin) {
        menuGoodsList.value[isMenuItemActive.value].count = menuGoodsList.value[isMenuItemActive.value].saleLimitMin
        alert('数量不能小于起售数量')
        } else {
            menuGoodsList.value[isMenuItemActive.value].count -= menuGoodsList.value[isMenuItemActive.value].saleLimitStep
        
        }
    }else{
        if (menuGoodsList.value[isMenuItemActive.value].count  <= 1) {
            alert('数量不能小于起售数量')
        } else {
            menuGoodsList.value[isMenuItemActive.value].count --
        
        }
    }

   
    goodsTotal()
}
//打开数量输入器
const editCount = () => {
    if (menuGoodsList.value[isMenuItemActive.value]) {
        tempNum.value = menuGoodsList.value[isMenuItemActive.value].count
        digitaShow.value = true
    }
}
//修改数量
const oninput = (n) => {
    if (tempNum.value.toString().length < 5) {
        tempNum.value += n
    } else {
        alert('数值不能超出5位数')
    }
    // if(menuGoodsList.value[isMenuItemActive.value].count.toString().length < 3){
    //     menuGoodsList.value[isMenuItemActive.value].count += n
    // }else{
    //     alert('数值不能超出3位数')
    // }
}
const delinput = (n) => {
    if(n){
        n = n + ''
    }
    console.log(n);
    
    tempNum.value = n.slice(0, n.length - 1)
}
const removeinput = (n) => {
    tempNum.value = ''
}
const subNum = () => {
    if(tempNum.value < menuGoodsList.value[isMenuItemActive.value].saleLimitMin){
        tempNum.value = menuGoodsList.value[isMenuItemActive.value].saleLimitMin
        ElNotification({
            title: '提示',
            message: '商品数量不可低于起售数量',
            type: 'warning',
        })
        return
    }else{
        menuGoodsList.value[isMenuItemActive.value].count = tempNum.value
    }
     
    digitaShow.value = false
    goodsTotal()
}

// 商品被沽清后 刷新商品
watch(configStore.isGoodChange,(newValue,oldValue)=>{
    console.log(menuGoodsList.value,configStore.isGoodChange.goodsCode);
    if(configStore.isGoodChange.goodsCode == []){
        alert('定价方案发生变化，请刷新页面')
        window.location.reload()
    }
    if(hasCodeInTargetArray(menuGoodsList.value,configStore.isGoodChange.goodsCode)){ // 购物车是否有商品发生变动
        alert('商品价格发生变动或已售罄，请重新点单')
        window.location.reload()
    }else{
        
        configStore.isGoodChange.goodsCode.forEach(smallItem => {
            goodsStore.goodsList.forEach((largeItem, index) => {
                if (largeItem.goodsCode === smallItem.goodsCode) {
                    goodsStore.goodsList[index] = smallItem; // 替换为小数组的元素
                }
            });
        });
        getGoodsInfo()
        
                // onInit()
    }
})
// 对比数组 判断两数组中是否有相同的
const hasCodeInTargetArray=(objectArray, targetArray)=> {
  return objectArray.some(obj => {
      return targetArray.some(target => obj.goodsCode == target.goodsCode);
  });
}
//商品合计
const goodsTotalData = ref({
    totalCount: 0,
    totlePrice: 0
})
const goodsTotal = () => {
    goodsTotalData.value = {
        totalCount: 0,
        totlePrice: 0
    }
    menuGoodsList.value.map(e => {
        goodsTotalData.value.totalCount += Number(e.count)
        goodsTotalData.value.totlePrice += Number(e.priceList[0].salePrice) * Number(e.count)
    })
}
//打开口味弹窗
const flavorsShow = () => {
    flavorItemS.value = []
    flavorList.value.map(item=>{
        flavorItemS.value.push(...item.arr)
    })
    tasteShow.value = true
    console.log(flavorItemS.value);
    
}
//选择口味组
const changeFlavor = (i, s) => {
    isFlavorActive.value = s
    flavorItemS.value = []
    console.log(i,s);
    if(s == -1){
        flavorList.value.map(item=>{
            flavorItemS.value.push(...item.arr)
        })
    }else{
        flavorItemS.value = flavorList.value[s].arr
    }

}
//测试方法
const removeElement = (arr, value) => {
    return arr.filter(function (item) {
        return item !== value;
    });
}
//选择口味
const thisGoodsFlavor = ref([])
const ChoseFlavor = (item) => {
    // var arr = [1, 2, 3, 4, 5];
    // var newValue = 3;
    // arr = removeElement(arr, newValue);
    // console.log(arr); // [1, 2, 4, 5]
    // return
    item.state = !item.state
    if (item.state) {
        thisGoodsFlavor.value.push(item.name)
    } else {
        thisGoodsFlavor.value = removeElement(thisGoodsFlavor.value, item.name);
    }
    console.log(thisGoodsFlavor.value)
}
const subFlavor = (flavor) => {
    tasteShow.value = false
    menuGoodsList.value[isMenuItemActive.value].flavors = JSON.parse(JSON.stringify(flavor))
}
// menuGoodsList[isMenuItemActive].flavors
//删除商品
const delGoods = () => {
    menuGoodsList.value.splice(isMenuItemActive.value, 1);
    isMenuItemActive.value = '0'
    goodsTotal()
}
//清空商品
const removeGoods = () => {
    menuGoodsList.value = []
    goodsTotalData.value = {
        totalCount: 0,
        totlePrice: 0
    }
}
//整单备注
const remark = ref('')
const remarkModal = () => {
    remarkShow.value = true
    remark.value = orderRemark.value
}

//键盘
const keyboard = ref(
    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '空格', 'shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '清空']
)
const CapsLock = ref(false)
const keyPress = (key) => {
    //输入框
    if (key != 'shift' && key != 'SHIFT' && key != '空格' && key != '清空') {
        if (goodsCode.value == '请输入菜品简码') {
            goodsCode.value = ''
            goodsCode.value += key
        } else {
            goodsCode.value += key
        }
        SearchBtn()
    }
    //空格
    if (key == '空格' && goodsCode.value != '请输入菜品简码') {
        goodsCode.value += ' '
        SearchBtn()
    }
    //清空
    if (key == '清空') {
        goodsCode.value = ''
        SearchBtn()
    }
    //大小写切换
    let Caps = ''
    if (key == 'shift' && !CapsLock.value) {
        CapsLock.value = !CapsLock.value
        Caps = keyboard.value.toString().toUpperCase()
        keyboard.value = Caps.split(',')
    } else if (key == 'SHIFT' && CapsLock.value) {
        CapsLock.value = !CapsLock.value
        Caps = keyboard.value.toString().toLowerCase()
        keyboard.value = Caps.split(',')
    }
}
// 简码搜索按钮
const SearchBtn = () => {
    if (goodsCode.value != '请输入菜品简码') {
        GoodsList.value = ''
        goodsInfoPar.value = { pageIndex: 1, pageSize: 17, shortName: goodsCode.value }
        console.log(goodsInfoPar.value)
        getGoodsInfo()
    } else {
        goodsInfoPar.value = { pageIndex: 1, pageSize: 17, shortName: '' }
        getGoodsInfo()
    }
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });


//下单
const orderBatchCode = ref('')
const payZero = ref(false)
const orderFlag = ref(false)
const placeOrder = () => { 
    if (menuGoodsList.value.length == 0) {
        ElMessage.error('请添加商品')
        return
    }
    // if(goodsTotalData.value.totlePrice <= 0){
    //     ElMessage.error('0元商品不可单独购买')
    //     return
    // }
    if(orderFlag.value){
        ElMessage.error('加载中，请稍等')
        return
    }
    orderFlag.value = true
    // salePrice
    let details = {}
    let router_orderBatchCode = router.currentRoute.value.query.orderBatchCode
    let contentData = {
        consumeCode: ls.get('TABLE_INFO').consumeCode,
        roomCode: ls.get('TABLE_INFO').roomCode,
        // consumeCode: "0004202402050006",
        // roomCode: "0004003",
        remark: orderRemark.value,
        operType: "",
        ip: ip.value,
        detail: [],
        orderBatchCode: router_orderBatchCode,
        payType: '1',
    }
    menuGoodsList.value.map(e => {
        details = {
            itemCode: "",
            doType: "add",
            indexStr: "",
            itemType: "",
            goodsPriceCode: "",
            goodsCode: "",
            goodsName: "",
            uomCode: "",
            uomName: "",
            flavor: "",
            salePrice: "",
            orderQty: "",
            producePoint: "",
            vipPrice: "",
            percentPrice: "",
            isUseGold: "",
            saleCoins: ""
        }
        e.priceList.map(s => {
            details.indexStr = e.indexStr
            details.itemCode = s.itemCode
            details.itemType = e.type
            details.goodsCode = e.goodsCode
            details.goodsName = e.goodsName
            details.uomCode = s.uomCode
            details.uomName = s.uomName
            details.salePrice = s.salePrice
            details.producePoint = s.producePoint
            details.orderQty = e.count
            details.vipPrice = s.vipPrice + ""
            details.isUseGold = s.isUseGold
            details.saleCoins = s.saleCoins
           
            if (e.flavors) {
                details.flavor = e.flavors.toString()
            }
            
            contentData.detail.push(JSON.parse(JSON.stringify(details)))
            if (s.detail) {
                s.detail.map(v => {
                    details.indexStr = e.indexStr
                    details.goodsPriceCode = v.packageCode
                    details.itemCode = s.itemCode
                    details.itemType = '3'
                    details.goodsCode = v.goodsCode
                    details.goodsName = v.goodsName
                    details.uomCode = v.uomCode
                    details.uomName = v.uomName
                    details.salePrice = v.salePrice
                    details.orderQty = v.defaultQty
                    details.vipPrice = v.vipPrice + ""
                    details.producePoint = v.producePoint
                    details.percentPrice = v.percentPrice + ""
                    details.isUseGold = s.isUseGold
                    details.saleCoins = s.saleCoins
                    details.flavor = v.flavors
                    contentData.detail.push(JSON.parse(JSON.stringify(details)))
                })
            }
        })
    })
   
    calculateOrderQty(contentData.detail)
    contentData.totalAmt = contentData.detail.reduce((sum, item) => sum + Number(item.salePrice), 0)
        contentData.marketUserName = selectedValueText.value 
        contentData.marketUser = selectedValue.value
        console.log(contentData,'contentData')
        Api.Common.PcObjProcess.Do({ functionName: "orderAdd", contentData })
        .then(res => {
            menuGoodsList.value = []
            orderRemark.value = ''
            remark.value = ''
            orderBatchCode.value = res.orderBatchCode
            ElNotification({
                title: '提示',
                message: '下单成功',
                type: 'success',
            })
            router.back()
            orderFlag.value = false
        }).catch(err=>{
            orderFlag.value = false
        })
}
const placeCheckout = () => {
    if (menuGoodsList.value.length == 0) {
        ElMessage.error('请添加商品')
        return
    } 
    if(goodsTotalData.value.totlePrice <= 0){
        payZero.value = true
       
        return
    }
    let details = {}
    let contentData = {
        consumeCode: ls.get('TABLE_INFO').consumeCode,
        roomCode: ls.get('TABLE_INFO').roomCode,
        // consumeCode: "0004202402050006",
        // roomCode: "0004003",
        remark: orderRemark.value,
        operType: "",
        detail: []
    }
    // console.log('menuGoodsList.value :>> ', menuGoodsList.value);
    // return
    menuGoodsList.value.map(e => {
        details = {
            itemCode: "",
            doType: "add",
            indexStr: "",
            itemType: "",
            goodsPriceCode: "",
            goodsCode: "",
            goodsName: "",
            uomCode: "",
            uomName: "",
            flavor: "",
            salePrice: "",
            orderQty: "",
            producePoint: "",
            vipPrice: "",
            goodsType: "",
            isUseGold: "",
            saleCoins: "",
            isPackage: false,
            subGoods: []
        }
        e.priceList.map(s => {
            details.indexStr = e.indexStr
            details.itemCode = s.itemCode
            details.itemType = e.type
            details.goodsCode = e.goodsCode
            details.goodsName = e.goodsName
            details.uomCode = s.uomCode
            details.uomName = s.uomName
            details.salePrice = s.salePrice
            details.orderQty = e.count
            details.producePoint = s.producePoint
            details.vipPrice = s.vipPrice + ""
            details.goodsType = e.goodsType
            details.isUseGold = s.isUseGold
            details.saleCoins = s.saleCoins
            details.isPackage = e.groupTypeName == "套餐" ? true : false
            details.subGoods = s.detail

            if (e.flavors) {
                details.flavor = e.flavors.toString()
            }

            if (details.subGoods && details.subGoods.length > 0) {
                details.subGoods.map(v => {
                    v.indexStr = e.indexStr
                    v.orderQty = v.defaultQty
                })
            }
        })
        contentData.detail.push(details)
    })
    calculateOrderQty(contentData.detail)
    console.log('contentData :>> ', contentData);
    // return
    if (contentData.detail.length <= 0) return ElNotification({
        title: '提示',
        message: '请先选择商品',
        type: 'warning',
    })
    ls.set('WARES_ORDER', contentData.detail)
    let router_orderBatchCode = router.currentRoute.value.query.orderBatchCode
    router.push({ path: '/order/pay', query: { consumeCode: ls.get('TABLE_INFO').consumeCode, orderBatchCode: router_orderBatchCode, todo: 'orderAdd',remark:contentData.remark ,
    marketUserName:selectedValueText.value,marketUser:selectedValue.value 
    } })
    return
    Api.Common.PcObjProcess.Do({ functionName: "orderAdd", contentData })
        .then(res => {
            menuGoodsList.value = []
            orderRemark.value = ''
            remark.value = ''
            orderBatchCode.value = res.orderBatchCode
            console.log(orderBatchCode.value);
            router.push({ path: '/order/pay', query: { consumeCode: ls.get('TABLE_INFO').consumeCode } })
        })

}
const handleSubmit = ()=>{
    placeOrder()
}
const jump = () => {
    router.push({
        path: '/replaceDishes',
        query: {
            code: orderBatchCode.value,
        }
    })
}

// 套餐子项数量调整
function calculateOrderQty(items) {
  // 首先按 indexStr 分组
  const groupedItems = {};
  items.forEach(item => {
    if (!groupedItems[item.indexStr]) {
      groupedItems[item.indexStr] = [];
    }
    groupedItems[item.indexStr].push(item);
  });

  // 处理每个分组
  for (const indexStr in groupedItems) {
    const group = groupedItems[indexStr];
    let itemType2OrderQty = null;

    // 找到itemType为2的对象，并记录其orderQty
    group.forEach(item => {
      if (item.itemType == '2') {
        itemType2OrderQty = item.orderQty;
      }
    });

    if (itemType2OrderQty != null) {
      // 计算其它对象的orderQty乘以itemType为2的对象的orderQty
      group.forEach(item => {
        if (item.itemType == '3') {
          item.orderQty = Number(itemType2OrderQty) * Number(item.orderQty);
        }
      });
    }
  }

  return items;
}


const treeData = ref([])
const selectedValueText = ref(''); 
const selectedValue = ref(''); 
const showYxOrder = ref(false) // 显示下单人 已经下过单的和部分门店不需要
//获取订台人配置
const getGetOrgGroup = ()=> {
  Api.Common.PcObjProcess.Do({ "functionName": "GetOrgGroup", "contentData":"" })
    .then(res => {
       console.log(res,'列表数据')
         if(res.result.length > 0) {
          treeData.value = res.result
         }
     })
}
getGetOrgGroup()

const handleSelectionChange = (value) => {
    selectedValue.value = value
 // 遍历 treeData 查找匹配的节点
 for (let group of treeData.value) {
    // 遍历该组的子节点（children）
    for (let child of group.children) {
      // 判断子节点的 value 是否与选中的值匹配
      if (child.value === value) {
        // 拼接上一级的 label（父节点）和当前子节点的 label
        const result = `${group.label} - ${child.label}`;
        // 将拼接结果存储到 formData.selectedName 中（或者其他需要显示的地方）
        selectedValueText.value = result;
        return; // 找到匹配项后结束函数
      }
    }
  }
}; 

//初始化
const onInit = async () => {
    ls.remove('GOOD_SESSION') // 清除掉版本号（初始化获取商品数据前）
    GetGoodsTypeOrg()
    await goodsStore.UpdateAll()
    getGoodsInfo()
    if(ls.get('USER_INFO').orgCode == '0024' || ls.get('USER_INFO').orgCode == '0025' || ls.get('USER_INFO').orgCode == '0014' ){ // 赤红门店需要
            showYxOrder.value = true
    }
    
}
onInit()
</script>
<style scoped lang="scss">
.container {
    ::v-deep {
        .el-dialog__header {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 24px;
            color: #212121;
        }

        .el-dialog {
            width: 450px;
            height: 250px;
            background: #FFFFFF;
            border-radius: 16px;
        }
    }

    .content-box {
        margin-top: 10px;
        padding: 0 35px;
        font-family: Microsoft YaHei;
        // font-weight: bold;
        font-size: 16px;
        color: #212121;
    }

    .footer-box {
        margin-top: 40px;
        display: flex;
        justify-content: center;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
        .submit:hover{ 
            color: #fff !important;
        }
    }
}
.pageClose {
    display: flex;
    justify-content: flex-end;
    background-color: #F2F2F2;
    box-sizing: border-box;
    padding-top: 20px;
    padding-right: 110px;
    margin-bottom: 20px;

    div {
        width: 120px;
        padding: 18px 0;
        border-radius: 10px;
        text-align: center;
        font-size: 18px;
        background-color: #CCCCCC;
    }
}

::v-deep(.FlavorDialog) {
    .modFlavor {
        display: flex;
        align-items: center;
        margin-top: 15px;

        div {
            cursor: pointer;
            background-color: rgb(230, 230, 230);
            padding: 3px 10px;
            border-radius: 5px;
            margin-right: 10px;
        }

        .isActs {
            background-color: #FFE566;
        }
    }

    .setPrices {
        background-color: #FFE566 !important;
        color: #212121 !important;
    }

    .btnS {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;

        .btn {
            width: 45%;
            text-align: center;
            border-radius: 10px;
            border: 1px solid #FF6A00;
            color: #FF6A00;
            padding: 10px 0;
        }

        .btn:hover {
            background-color: #FF6A00;
            color: #fff;
            cursor: pointer;
        }
    }
}

* {
    font-size: 16px;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* 标准语法 */
}

.body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    // height: 1080px;
    padding-bottom: 60px;
    background: #f2f2f2;
}
.body-top{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .form-box {
            ::v-deep {
                .el-input__wrapper {
                    background: #F9F9F9;
                    border-radius: 8px;
                    border: 0;
                    font-size: 16px;
                    color: #999999;
                }
                .el-form-item--large{
                    margin-bottom: 0;
                }
            }

            .qrcode-img {
                width: 24px;
                height: 24px;
                position: absolute;
                right: 10px;
                cursor: pointer;
            }
            margin-right: 40px;
    }
}
.boxContent {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: calc(100% - 100vw);
    background-color: #F2F2F2;
    color: #212121;
    box-sizing: border-box;
    padding: 20px 120px;
    padding-top: 0;
}

.boxLeft {
    display: flex;
    width: 560px;
    height: 800px;
    justify-content: flex-end; /* 水平对齐到右侧 */
    align-items: flex-start; /* 垂直对齐到顶部 */


    .orderBox {
        width: 560px;
        height: 800px;
        background-color: #fff;
        padding-bottom: 20px;
        border-radius: 6px;
        .orderDetails {

            width: 100%;
            height: 680px;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            position: relative;

            .foolNull {
                text-align: center;
                margin-top: 240px;
                margin-left: 150px;
                position: absolute;

                img {
                    width: 60px;
                    height: auto;
                }

                div {
                    font-size: 18px;
                    color: #FF6A00;
                    padding: 5px 0;
                }
            }

            .tableTop {
                font-size: 23px;
                font-weight: bold;
                box-sizing: border-box;
                padding: 15px 20px;
            }
            .jt-select {
                display: flex;
                align-items: center;
                width: 280px;
                .jt-xdr {
                   width: 100px;    
                }
            }

            .tableInfo {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
            }

            .MenuTitle {
                display: flex;
                align-items: center;
                background-color: #E6E6E6;
                box-sizing: border-box;
                padding: 13px 22px;
                // margin-top: 16px;
                border-radius: 8px;
                margin: 16px 10px 0;
                div {
                    text-align: center;
                }

                div:nth-child(1) {
                    width: 30%;
                    text-align: left;
                }

                div:nth-child(2) {
                    width: 22%;
                    text-align: right;
                    
                }

                div:nth-child(3) {
                    width: 28%;
                    transform:translateX(-6%)
                    
                }
                div:nth-child(4) {
                    width: 20%;
                }
            }
            .MenuMain {
                display: flex;
                justify-content: space-between; /* 左右两端对齐 */
                overflow-y: hidden;
            
            .MenuList::-webkit-scrollbar {
                      display: none; /* 隐藏滚动条 */
            }

             .MenuList {
                width: 72%;
                height: 495px;
                overflow-y: auto;
                scrollbar-width: none; /* 隐藏滚动条 */
                -ms-overflow-style: none; /* 隐藏滚动条 */

                // background-color: red;
                .listRemark {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background-color: #E6E6E6;
                    padding: 10px 20px;
                    width: 72%;

                    div {
                        color: #999999;
                        font-size: 15px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        /* 设置为想要的最大行数 */
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .MenuItem {
                    // display: flex;
                    // align-items: center;
                    cursor: pointer;
                    background-color: #F9F9F9;
                    margin: 10px;
                    border-radius: 8px;
                    box-sizing: border-box;
                    padding: 10px 10px;

                    .goodsTitle {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;

                        div {
                            text-align: center;
                        }

                        .name {
                            width: 55%;
                            text-align: left;

                            span {
                                background-color: #FF3333;
                                color: #fff;
                                font-size: 14px;
                                padding: 0 5px;
                                border-radius: 5px;
                                margin-right: 5px;
                            }
                        }

                        .price {
                            width: 30%;
                        }

                        .count {
                            width: 15%;
                        }
                    }

                    .goodsTaste {
                        font-size: 13px;
                        color: #666;
                        margin: 10px 0 0 20px;
                    }

                    .goodsMinutia {
                        display: flex;
                        align-items: center;
                        margin-top: 10px;

                        .dot {
                            background-color: #FF6A00;
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            margin: 0 8px 0 15px;
                        }

                        .typ {
                            font-size: 13px;
                        }

                        .fvor {
                            font-size: 13px;
                        }

                        .count {
                            font-size: 13px;
                            margin-left: 5px;
                        }
                    }
                }

                .MenuItemActive {
                    background-color: #FFFBE5;
                }
            }
            .menuOperation {
              padding-right: 0px;
              background: rgba(255, 255, 255, 0);
              border-radius:0 10px 10px  0;
              height: 600px;
            div {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #FFF6CC;
            font-size: 18px;
            padding: 0 12px;
            width: 100px;
            height: 56px;
            border-radius: 10px;
            margin: 10px;
            margin-bottom: 10px;

            img {
                width: 32px;
                height: 32px;
                margin-left: 7px;
            }
        }
    }
            }

            .orderPage {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;

                div {
                    background-color: #F2F2F2;
                    color: #00AAFF;
                    width: 44%;
                    text-align: center;
                    padding: 12px 0;
                    border-radius: 10px;
                }
            }
        }

        .orderCheckout {
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          padding: 0 10px;
            div {
                width: 48%;
                padding: 20px 0;
                border-radius: 10px;
                font-size: 18px;
                text-align: center;
                background-color: #FFD400;
                cursor: pointer;
            }
        }
    }

}

.boxRight {
    width: 1143px;
    
    .goodsBox {
        // border-radius:8px !important;
        width: 1140px;
        // height: 840px;
        // background-color: #f2f2f2;
        background-color: #fff;
        box-sizing: border-box;
        // padding-top: 20px;
        display: flex;
        // align-items: flex-start;
        justify-content: space-between;
        border-radius:8px ;
        .goodsLeft {
            // background-color:#E6E6E6;
            border-radius:8px !important;
            .menuScroll {
                width: 120px;
                border-radius: 10px 0 0px 10px ;
                overflow: hidden;
                background-color:#fff;
                padding-bottom: 12px;
                border-radius:8px !important;
                .goodsMenu-ff {
                    padding-left: 10px;
                    padding-right: 10px;
                    // padding: 20px 10px 20px 10px;
                    border-radius:8px !important;
                    background-color:#fff;
                }
                .goodsMenu {
                    margin-top: 20px;
                    width: 145px;
                    height: 700px;
                    background-color:#f2f2f2;
                    overflow-y: scroll;
                    overflow-x: hidden;
                    border-radius:8px !important;
                    .title_box {
                        width: 120px;
                        // padding: 18px 0;
                        height: 57px;
                        // line-height: 57px;
                        font-size: 18px;
                        color: #666666;
                        text-align: center;
                        cursor: pointer;
                        .title-out{
                            width: 80px;
                            height: 57px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-bottom: 1px solid #D9D9D9;
                            margin: 0 25px 0 auto;
                            .title{
                                width: 80px;
                                height: auto;
                                line-height: normal;
                                
                                // vertical-align:middle;
                            }
                        }
                       
                    }

                    .TypeActive {
                        background-color: #ffe566;
                        color: #212121;
                     
                    }
                    .TypeActivebt .title{
                        border-bottom: none;
                    }
                    .TypeActive .title{ 
                        border-bottom: none;
                    }
                    .title_box:nth-last-child(1) .title-out {
                        border-bottom: none;
                    }
                }
                .SearchBtn {
                    width: 110px;
                    margin: 20px 0px auto auto;
                   height: 48px;
                   line-height: 48px;
                    background-color: #FFD400;
                    // margin-top: 20px;
                    border-radius: 10px;
                    font-size: 16px;
                    text-align: center;
                    cursor: pointer;
                }
            }

            .sCodeSearch {
                position: relative;

            

                .SearchPanel {
                    background-color: #FFFFFF;
                    position: absolute;
                    right: 115px;
                    bottom: 1px;
                    border-radius: 10px;
                    overflow: hidden;
                    border: 1px solid #FFD400;
                    box-sizing: border-box;
                    padding: 20px;
                    z-index: 99;
                    width: 600px;
                    z-index: 100;

                    // height: 610px;
                    .SearchHead {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .SearchBar {
                            display: flex;
                            align-items: center;
                            border: 1px solid #FFD400;
                            box-sizing: border-box;
                            padding: 1px;
                            border-radius: 30px;
                            height: 48px;

                            div {
                                width: 400px;
                                color: #999999;
                                box-sizing: border-box;
                                padding-left: 20px;
                            }

                            input {
                                width: 400px;
                                color: #999999;
                                box-sizing: border-box;
                                padding-left: 20px;
                            }

                            span {
                                font-size: 18px;
                                background-color: #FFD400;
                                border-radius: 30px;
                                width: 82px;
                                height: 44px;
                                line-height: 44px;
                                text-align: center;
                                cursor: pointer;
                            }
                        }

                        img {
                            width: 40px;
                            height: 40px;
                        }
                    }

                    .SearchKey {
                        border: 1px solid #767676;
                        border-radius: 10px;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        margin-top: 20px;

                        div {
                            width: 10%;
                            height: 55px;
                            line-height: 55px;
                            text-align: center;
                            border: 1px solid #E1E1E1;
                            color: #161616;
                            font-size: 17px;
                            cursor: pointer;
                        }

                        div:last-child {
                            width: 20%;
                        }
                    }
                }
            }
        }

        .goodsRight {
            width: 1015px;
            height: 800px;
            padding: 20px 10px;
            display: flex;
            align-content: flex-start; /* 换行后对齐到容器的起始位置 */
            // flex-direction: column;
            // align-items: center;
            // justify-content: space-between;
            gap: 4px;
            flex-wrap: wrap;
            background: #fff;
            border-radius:8px ;
            .goodsItemAmi {
                animation: goodsAmi 1s ease-in-out forwards;
            }

            @keyframes goodsAmi {
                0% {
                    background-color: #fff;
                }

                50% {
                    background-color: #FFFBE5;
                }

                100% {
                    background-color: #fff;
                }
            }
         
            .goodsItem {
                height: 250px;
                background: #F2F2F2;
                border-radius: 8px;
                box-sizing: border-box;
                padding: 10px;
                width: 160px;
                margin-bottom: 4px;
                // margin-bottom: 30px;
                overflow: hidden;
                position: relative;
                cursor: pointer;

                .Mask {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    background-color: rgba(0, 0, 0, 0.6);
                    left: 0;
                    top: 0;
                    z-index: 99;

                    div {
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        color: #fff;
                        font-size: 24px;
                        text-align: center;
                        margin: auto;
                    }
                }

                .goodsLogoS {
                    position: relative;
                    border-radius: 5px;
                    // overflow: hidden;
                    margin-bottom: 4px;

                    .img-jinbi {
                        position: absolute;
                        width: 40px;
                        height: 20px;
                        right: -10px;
                        top: -10px;
                    }

                    .goodsLogo {
                        width: 140px;
                        height: 140px;
                        vertical-align: middle;
                    }

                    .goodsVipPrice {
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        background-color: rgba($color: #000000, $alpha: 0.8);
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        padding: 2px 0;
                    }
                }


                .goodsName {
                    width: 140px;
                    height: 44px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    line-height: 1.4;

                    span {
                        color: #fff;
                        background-color: #FF3333;
                        font-size: 14px;
                        padding: 0 4px;
                        border-radius: 5px;
                        margin-right: 5px;
                    }
                }

                .goodsPrice {
                    color: #FF3333;
                    font-size: 18px;
                }

                .coin {
                    position: absolute;
                    right: 5px;
                    top: 5px;
                    background-color: #FF6A00;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 30px;
                    letter-spacing: 1px;
                    padding: 1px 5px;
                }
            }

            .holde {
                background-color: transparent;
                width: 160px;
                padding: 0;
                margin: 0;
            }

            .goodsPage {
                // position: relative;
                // top:8px;
                // background-color: #fff;
                // box-sizing: border-box;
                // padding: 10px;
                margin-top: 10px;
                display: grid;
                grid-template-columns: auto;
                // grid-column-gap: 40px;
                grid-row-gap: 20px;
                margin-bottom: 11px;
                height: 150px;
                div {
                    width: 160px;
                    border-radius: 10px;
                    text-align: center;
                    padding: 39px 0;
                    background-color: #F2F2F2;
                    font-size: 22px;
                    cursor: pointer;
                }

                .disbPages {
                    pointer-events: none;
                    background: #F2F2F2 !important;
                    color: #ccc !important;
                    cursor: not-allowed;
                    // opacity: 0;
                }
            }
        }
    }
}

::v-deep(.menuDialog) {
    padding: 0;
    margin: 0;
    top: 190px;
    left: 620px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #FFD400;

    .el-dialog__header {
        background-color: #FFD400;
        padding: 16px 0;

        .el-dialog__title {
            font-size: 19px;
            font-weight: bold;
        }
    }
}

.digitalPanel {
    box-sizing: border-box;
    padding: 30px 20px;
    padding-bottom: 0;

    ::v-deep(.el-input) {
        height: 50px;
        margin-bottom: 30px;

        .el-input__wrapper {
            background-color: #F9F9F9;
            font-size: 18px;
        }

    }

    .digitalNum {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .numBtn {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #212121;
            font-size: 22px;
            background-color: #E6E6E6;
            margin-bottom: 20px;
            border-radius: 10px;
            cursor: pointer;
        }

        .numBtn:hover {
            background-color: #FF6A00;
            color: #fff;
        }
    }
}

.dialog-footer {
    display: block;
    padding-bottom: 30px;

    .el-button {
        width: 160px;
        height: 60px;
        font-size: 26px;
        border-color: #FF6A00;
        color: #FF6A00;
        border-radius: 10px;
    }

    .el-button:hover {
        background-color: #FF6A00;
        color: #fff;
    }

    .el-button+.el-button {
        margin-left: 30px;
    }
}

.tasteContent {
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 0;
    display: flex;
    align-items: flex-start;
    height: 450px;

    .tasteClass {
        width: 15%;
        height: 100%;
        background-color: #FAFAFA;
        border-radius: 10px;
        overflow: hidden;

        div {
            text-align: center;
            font-size: 18px;
            color: #666;
            padding: 19px 0;
            cursor: pointer;
        }

        .FlavorActive {
            background-color: #FFE566;
            color: #212121;
        }
    }

    .tasteList {
        width: 85%;
        display: grid;
        box-sizing: border-box;
        padding-left: 20px;
        grid-template-columns: repeat(4, 23%);
        justify-content: space-between;
        grid-gap: 20px 0;

        .tasteItem {
            background-color: #E6E6E6;
            border-radius: 10px;
            text-align: center;
            font-size: 20px;
            padding: 19px 0;
            cursor: pointer;
        }

        .tasteActive {
            background-color: #FFE566;
            color: #212121;
        }
    }
}

.remarkContent {
    box-sizing: border-box;
    padding: 18px;
    position: relative;

    textarea {
        font-size: 18px;
        resize: none;
        width: 100%;
        background-color: #FAFAFA;
        box-sizing: border-box;
        padding: 18px 20px;
    }

    div {
        position: absolute;
        right: 30px;
        bottom: 30px;
        color: #00AAFF;
        cursor: pointer;
    }
}
.xdbz-contianr {
padding: 0 180px 0 10px;
display: flex;
justify-content: space-between;
.bz-title {
    font-size: 14px;
color: #999999;
}
.ts-icon {
width: 80px;
height: 30px;
}
}
</style>